<template>
  <div class="app-container">
    <!-- 添加或修改会员列表对话框 -->
    <el-dialog :title="title" :visible.sync="visible" width="800px" v-if="visible"  append-to-body>
        <div class="dia_box" v-loading="loading">
        <div class="dia_head">
          <span>日期</span>
          <span>使用情况</span>
        </div>
        <div v-if="billList.length==0" style="text-align: center;padding-top:10px">暂无数据</div>
        <div class="dia_detail" v-for="(item,index) in billList" :key='index'>
          <div class="dia_detail_l">{{item.useTime}}</div>
          <div class="dia_detail_r">
            <span style="margin-right: 10px">{{item.typeDict}}</span>
            <span v-if="item.cardType==9">到店</span>
            <span v-if="item.cardType==1||item.cardType==3||item.cardType==6">{{item.symbol}}{{item.changValue}}</span>
            <span v-if="item.cardType==2||item.cardType==5||item.cardType==8">{{item.symbol}}{{item.changValue}}次</span>
            <span v-if="item.cardType==4">{{item.symbol}}{{item.changValue}}课时</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { cardBillList } from "@/api/members";

export default {
  // dicts: ['customer_card_record_type'],
  name: "Dialog",
  data() {
    return {
      // 是否禁用表单
      disabled: false,
      // 弹出层标题
      title: "卡使用记录",
      // 是否显示弹出层
      visible: false,
      // 表单参数
      form: {},
      billList: [],
      loading: true,
    };
  },
  created() {
   
  },
  methods: {
    /** 打开会员列表弹框 */
    open(customerId,customerCardId,type) {
      this.visible = true
      if(type == 0){
        this.getCardBillList(customerId,customerCardId)
      }else if(type == 1){
        this.loading = false
      }
      
    },
    getCardBillList(customerId,customerCardId){
      let params = {
        customerId: customerId,
        customerCardId: customerCardId,
      };
      cardBillList(params).then(response => {
        response.result.forEach((item) => {
          if (item.type == 5 || item.type == 9 || item.type == 11 || item.type=='') {
            item.symbol = "-";
          }
          else {
            item.symbol = "+";
          }
        });
        this.billList = response.result;
        this.loading = false
      });
    },
    // 取消按钮
    cancel() {
      this.visible = false;
    },
   handleSymbol(type){
      if( type == 1){
        return '+'
      }else{
        return '-'
      }
    },
     handleCardType(cardType){
      if( cardType == 2){
        return '次'
      }else if(cardType == '3'){
        return '元'
      }else{
        return '天'
      }
    },
    
  }
};
</script>
<style lang="scss" scoped>
.just{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.dia_box {
  width: 100%;
}
.dia_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}
.dia_detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  margin-bottom: 24px;
}
</style>
